{extend name="common/common" /}

{block name="style"}
<style media="screen">
	.treeBox {
		height: 400px;
		overflow: auto;
	}
</style>
{/block}

{block name="content"}
<div class="ibox-title">
    <h5>角色列表
		<div class="top-btn-box">
			{if authCheck('role/roleadd')}
			<a href="{:url('role/roleAdd')}">
				<el-button type="primary" plain size="small">添加角色</el-button>
			</a>
			{/if}
		</div>
	</h5>
</div>
<div class="ibox-content">
	<div id="table-box">
		<el-form :inline="true" class="search-table-form">
			<el-form-item>
				<el-input
					placeholder="请输入搜索内容"
					clearable="true"
					prefix-icon="el-icon-search"
					v-model="searchText">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="info" plain @click="getTable">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" stripe="true" border>
			<el-table-column align="center" prop="id" label="ID" width="50"></el-table-column>
			<el-table-column align="center" prop="department" label="所属部门" width="150"></el-table-column>
			<el-table-column align="center" prop="role_name" label="角色名称" width="150"></el-table-column>
			<el-table-column align="center" prop="auth_gruop_name" label="权限组名称" width="150"></el-table-column>
			<el-table-column prop="operate" label="权限">
				<template slot-scope="scope">
					{if authCheck('role/giveaccess')}
					<!-- <el-button
						@click="giveAccess(scope.row)"
						size="small" plain type="primary"
						icon="fa fa-cubes"> 操作权限
					</el-button> -->
					<el-button
						@click="selectGruop(scope.row)"
						size="small" plain type="primary"
						icon="fa fa-cubes"> 操作权限
					</el-button>
					{/if}
					{if authCheck('role/giveaccess')}
					<el-button
						@click="giveSee(scope.row)"
						size="small" plain 	type="warning"
						icon="fa fa-eye"> 数据权限
					</el-button>
					{/if}
				</template>
			</el-table-column>
			<el-table-column prop="operate" label="操作">
				<template slot-scope="scope">
					{if authCheck('role/roleedit')}
					<el-button
						@click="editRow(scope.row)"
						size="small" plain type="success"
						icon="el-icon-edit">
					</el-button>
					{/if}
					{if authCheck('role/roledel')}
					<el-button
						@click="delRow(scope.row)"
						size="small" plain 	type="danger"
						icon="el-icon-delete">
					</el-button>
					{/if}
				</template>
			</el-table-column>
		</el-table>
		<div class="table-page">
			<el-pagination
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="pageNumber"
				:page-sizes="[10, 20, 50, 75]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal">
			</el-pagination>
		</div>
	</div>
</div>
{/block}
{block name="component"}
<div id="nodeTreeBox">
	<el-dialog title="操作权限" :visible.sync="showNodeTree" top="5vh">
		<div class="treeBox">
			<el-tree
				:data="nodeTree"
				ref="nodeTree"
				show-checkbox
				node-key="id"
				default-expand-all = "true"
				:default-checked-keys="rules">
			</el-tree>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showNodeTree = false">取消</el-button>
			<el-button type="success" @click="saveAccess">保存</el-button>
		</div>
	</el-dialog>
</div>
<div id="radioBox">
	<el-dialog title="可视权限" :visible.sync="showradioBox" top="5vh">
		<el-radio-group v-model="canSeeType">
			<el-row>
				<el-radio :label="0" border>仅自己</el-radio>
			</el-row>
			<el-row>
				<el-radio :label="1" border>所属部门</el-radio>
			</el-row>
			<el-row>
				<el-radio :label="2" border>所属部门及子部门</el-radio>
			</el-row>
			<el-row>
				<el-radio :label="3" border>所有</el-radio>
			</el-row>
		</el-radio-group>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showradioBox = false">取消</el-button>
			<el-button type="success" @click="saveSee">保存</el-button>
		</div>
	</el-dialog>
</div>
<div id="selectGruopBox">
	<el-dialog title="操作权限组" :visible.sync="is_show" top="5vh">
		<el-select v-model="group_id" placeholder="请选择">
			{volist name="authGroup" id="g"}
			<el-option
				label="{$g.name}"
				:value="{$g.id}">
			</el-option>
			{/volist}
		</el-select>
		<div slot="footer" class="dialog-footer">
			<el-button @click="is_show = false">取消</el-button>
			<el-button type="success" @click="saveGruop">保存</el-button>
		</div>
	</el-dialog>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:function(){
		return {
			loading:true,
			tableData:'',
			searchText:'',
			pageSize:10,
			pageNumber:1,
			tableTotal:0,
			editAccessID:0,
		}
	},
	mounted:function(){
		this.getTable();
	},
	methods:{
		editRow(row){
			if(row.id == 1){
				main.$notify.error({
					title: '失败',
					message: '不可编辑超级管理员账号',
				});
			}else{
				window.location.href = "./roleEdit?id=" + row.id;
			}
		},
		delRow(row){
			if(row.id == 1){
				main.$notify.error({
					title: '失败',
					message: '不可删除超级管理员账号',
				});
				return false;
			}
			this.$confirm('此操作将永久删除该数据,是否继续?','提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then((res) => {
				$.post("{:url('role/roleDel')}",{"id":row.id},function(res){
					if(res.code == 1){
						main.$notify({
							title:"成功",
							type: 'success',
							message: res.msg,
							onClose:main.getTable()
						});
					}else{
						main.$error({
							title: '错误'+res.code,
							message: res.msg
						});
					}
				})
			}).catch((res) => {
				this.$notify.info({
					title:"消息",
					message: "已取消删除"
				})
			});
		},
		getTable(){
			this.loading=true;
			$.post('./index',{
				'pageSize':this.pageSize,
				'pageNumber':this.pageNumber,
				'searchText':this.searchText
			},function(res){
				main.loading=false;
				if(res.code == 1){
					main.$message({
			          message: res.msg,
			          type: 'success'
			        });
					main.tableData = res.data.rows;
					main.tableTotal = res.data.total;
				}else{
					main.$notify.error({
						title: '失败',
						message: res.msg,
					});
				}
			})
		},
		pageSizeChange(val) {
			this.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.pageNumber = val;
			this.getTable();
		},
		giveAccess(row) {
			this.editAccessID = row.id;
			if(row.id == 1){
				main.$notify.error({
					title: '失败',
					message: '不可修改超级管理员账号',
				});
				return false;
			}
			nodeTree.showNodeTree = true;
			$.getJSON("{:url('role/giveAccess')}",{'type':'get','id':row.id},function(res){
				nodeTree.nodeTree = res.data.node;
				// nodeTree.rules = res.data.rule;
				var arr = [];
				for(i in res.data.rule){
					arr.push(res.data.rule[i]);
				}
				nodeTree.rules = arr;
			});
		},
		giveSee(row) {
			if(row.id == 1){
				main.$notify.error({
					title: '失败',
					message: '不可修改超级管理员账号',
				});
				return false;
			}
			radioBox.editCanseeID = row.id;
			$.getJSON("{:url('role/getCanseeType')}",{'id':row.id},function(res){
				radioBox.canSeeType = Number(res);
				radioBox.showradioBox = true;
			});
		},
		selectGruop(row) {
			this.editAccessID = row.id;
			if(row.id == 1){
				main.$notify.error({
					title: '失败',
					message: '不可修改超级管理员账号',
				});
				return false;
			}
			selectGruopBox.is_show = true;
		}
	}
})
var nodeTree = new Vue({
	el:"#nodeTreeBox",
	data() {
		return {
			showNodeTree:false,
			nodeTree:'',
			rules:[]
		}
	},
	methods:{
		saveAccess() {
			var AccessArr = this.$refs.nodeTree.getCheckedKeys();
			var HalfArr = this.$refs.nodeTree.getHalfCheckedKeys();
			for(i in HalfArr){
				AccessArr.push(HalfArr[i]);
			}
			$.post("./giveAccess",{
				'type':'give',
				'id':main.editAccessID,
				'rule':AccessArr
			},function(res){
				if(res.code == 1){
					nodeTree.showNodeTree = false;
					main.$notify({
						title:"成功",
			          	message: res.msg,
			          	type: 'success'
			        });
				}else{
					main.$notify.error({
						title: '失败',
						message: res.msg,
					});
				}
			})
		}
	}
})
var radioBox = new Vue({
	el:"#radioBox",
	data() {
		return {
			showradioBox:false,
			canSeeType:0,
			editCanseeID:0
		}
	},
	methods:{
		saveSee() {
			$.post("./giveSee",{
				'role_id':radioBox.editCanseeID,
				'type':radioBox.canSeeType
			},function(res){
				if(res.code == 1){
					radioBox.showradioBox = false;
					main.$notify({
						title:"成功",
			          	message: res.msg,
			          	type: 'success'
			        });
				}else{
					main.$notify.error({
						title: '失败',
						message: res.msg,
					});
				}
			})
		}
	}
})
var selectGruopBox = new Vue({
	el:"#selectGruopBox",
	data:{
		is_show:false,
		group_id:""
	},
	methods:{
		saveGruop() {
			var param = {
				role_id:main.editAccessID,
				group_id:this.group_id
			}
			$.post("./giveAccessGruop",param,function(res){
				if(res.code == 1){
					selectGruopBox.is_show = false;
					main.$notify({title:"成功",message: res.msg,type: 'success'});
					main.getTable();
				}else{
					main.$notify.error({title: '失败',message: res.msg});
				}
			})
		}
	}
})
</script>
{/block}
